<script lang="ts">
import { defineComponent, ref } from "vue";
import node from "./node.vue";
import Send from "./send.vue";
import transfer from "./transfer.vue";
import User from "./user.vue";

export default defineComponent({
    components: { transfer, node, Send, User },
    setup() {
        const active = ref(0);
        return {
            active,
        };
    },
});
</script>

<template>
    <div class="nodePage">
        <van-tabs
            v-model:active="active"
            shrink
            class="nav main2"
            color="#EB0029"
        >
            <van-tab :title="$t('layout.Buy')">
                <node v-if="active == 0" />
            </van-tab>
            <van-tab :title="$t('layout.Transfer')">
                <transfer v-if="active == 1" />
            </van-tab>
            <van-tab :title="$t('layout.Withdraw')">
                <send v-if="active == 2" />
            </van-tab>
            <van-tab :title="$t('layout.My')">
                <user v-if="active == 3" />
            </van-tab>
        </van-tabs>
    </div>
</template>

<style lang="less" scoped>
.nodePage {
    padding: 180px 15px 15px 15px;
    .nav {
        &:deep(> .van-tabs__wrap) {
            margin-bottom: 40px;
            border-bottom: 1px solid #d9d9d9;
            .van-tabs__nav {
                padding: 0;
                height: 46px;
                background: transparent;

                .van-tab {
                    // padding: 0 30px 0 0;
                    width: 160px;
                    font-size: 16px;
                    color: #000;

                    &.van-tab--active {
                        color: #eb0029;
                        font-weight: 700;
                    }
                }
                .van-tabs__line {
                    // display: none;
                    bottom: 1px;
                    left: 0;
                    width: 160px;
                }
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            padding: 98px 15px 15px 15px;
            .nav {
                &:deep(> .van-tabs__wrap) {
                    margin-bottom: 24px;
                    .van-tabs__nav {
                        .van-tab {
                            flex: 1;
                            width: auto;
                        }
                        .van-tabs__line {
                            width: 25%;
                        }
                    }
                }
            }
        }
    }
}
</style>
